import React from 'react';
import './index.css'
import {Form, Button, Row, Tooltip} from 'antd';
import {RegisterFormMap, renderFormItem} from "@/pages/login/common";
import {CheckCircleOutlined, CloseCircleOutlined} from '@ant-design/icons';

export const RegisterForm: React.FC<any> = (props: { fn: (t: string) => any }) => {

  const [userNameCheckColorlength, setUserNameCheckColorlength] = React.useState('#A8ADBD');
  const [userNameCheckColorReg, setUserNameCheckColorReg] = React.useState('#A8ADBD');
  const [userNameCheckRepeat, setUserNameCheckRepeat] = React.useState('#A8ADBD');
  const [passwordCheckColorlength, setPasswordCheckColorlength] = React.useState('#A8ADBD');
  const [passwordCheckColorReg, setPCheckColorReg] = React.useState('#A8ADBD');
  const [form] = Form.useForm();

  const handleSubmit = async (e: any) => {

  }

  const onValuesChange = (value: any, allValue: any) => {
    Object.keys(value).forEach(key => {
      switch (key) {
        case 'userName':
          checkUserName(value[key]);
          break;
        case 'password':
          checkUserPassword(value[key]);
          break;
        default:
          break;
      }
    });
  }

  const checkUserName = (value: any) => {

  }
  const checkUserPassword = (value: any) => {

  }

  const renderTip = (key: string) => {
    if (key === 'userName') {
      return (
        <>
          <div>
            {
              userNameCheckColorlength !== '#EF645C' ?
                <CheckCircleOutlined style={{color: userNameCheckColorlength}}/> :
                <CloseCircleOutlined style={{color: userNameCheckColorlength}}/>
            }
            &nbsp;长度为5-50个字符
          </div>
          <div>
            {
              userNameCheckColorReg !== '#EF645C' ? <CheckCircleOutlined style={{color: userNameCheckColorReg}}/> :
                <CloseCircleOutlined style={{color: userNameCheckColorReg}}/>
            }
            &nbsp;支持英文字母、数字、下划线
          </div>
          <div>
            {
              userNameCheckRepeat !== '#EF645C' ? <CheckCircleOutlined style={{color: userNameCheckRepeat}}/> :
                <CloseCircleOutlined style={{color: userNameCheckRepeat}}/>
            }
            &nbsp;账号不可重复
          </div>
        </>
      )
    } else {
      return (
        <>
          <div>
            {
              passwordCheckColorlength !== '#EF645C' ?
                <CheckCircleOutlined style={{color: passwordCheckColorlength}}/> :
                <CloseCircleOutlined style={{color: passwordCheckColorlength}}/>
            }
            &nbsp;6-20个字符
          </div>
          <div>
            {
              passwordCheckColorReg !== '#EF645C' ? <CheckCircleOutlined style={{color: passwordCheckColorReg}}/> :
                <CloseCircleOutlined style={{color: passwordCheckColorReg}}/>
            }
            &nbsp;英文字母、数字、标点符号（除空格）
          </div>
        </>
      )
    }
  }

  return (
    <>
      <Form
        form={form}
        name="normal_login"
        layout={'vertical'}
        className="login-form"
        onFinish={handleSubmit}
        onValuesChange={onValuesChange}
      >
        {RegisterFormMap.map(formItem => {
          return (
            <div key={formItem.key}>
              {
                (formItem.key === 'userName' || formItem.key === 'password') ?
                  <Tooltip
                    color="#fff"
                    placement="right"
                    key={formItem.key}
                    overlayClassName="custom-login-style"
                    title={renderTip(formItem.key)}
                  >
                    <Row key={formItem.key}>
                      <Form.Item
                        key={formItem.key}
                        name={formItem.key}
                        label={formItem.label}
                        rules={formItem.rules}
                        style={{width: '100%'}}
                      >
                        {renderFormItem(formItem)}
                      </Form.Item>
                    </Row>
                  </Tooltip>
                  :
                  <Row key={formItem.key}>
                    <Form.Item
                      key={formItem.key}
                      name={formItem.key}
                      label={formItem.label}
                      rules={formItem.rules}
                      style={{width: '100%'}}
                    >
                      {renderFormItem(formItem)}
                    </Form.Item>
                  </Row>
              }
            </div>
          )
        })
        }
        <Form.Item key={'submit'}>
          <Row>
            <Button style={{width: '100%', height: 40}} type="primary" htmlType="submit">
              立即注册
            </Button>
          </Row>
        </Form.Item>
      </Form>
    </>
  )
}

export default RegisterForm
